<template>
  <div class="form-password">
    <van-nav-bar class="header" left-arrow @click-left="onBack()">
      <template #title>
        <p style="font-size: 16px;color: #333333;font-weight: 400;">修改密码</p>
      </template>
      <template #left>
        <van-icon name="arrow-left" size="18" color="#3B3938" />
      </template>
    </van-nav-bar>

    <div class="form-container">
      <van-form @submit="handleSubmit" label-width="70px">
        <van-cell-group inset>
          <van-field
            v-model="form.loginName"
            name="loginName"
            label="登录名称"
            placeholder="请输入登录名称"
            clearable
            :rules="[{ required: true, message: '请输入登录名称' }]"
          />
          <van-field
            v-model="form.oldPassword"
            type="password"
            name="oldPassword"
            label="旧密码"
            placeholder="请输入旧密码"
            clearable
            :rules="[{ required: true, message: '请输入旧密码' }]"
          />
          <van-field
            v-model="form.newPassword"
            type="password"
            name="newPassword"
            label="新密码"
            placeholder="请输入新密码"
            clearable
            :rules="[
              { required: true, message: '请输入新密码' },
              { validator: validateNewPassword, message: '新密码不能与旧密码相同' }
            ]"
          />
          <van-field
            v-model="form.confirmPassword"
            type="password"
            name="confirmPassword"
            label="确认密码"
            placeholder="请再次输入新密码"
            clearable
            :rules="[
              { required: true, message: '请再次输入新密码' },
              { validator: validateConfirmPassword, message: '两次输入的密码不一致' }
            ]"
          />
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit" :loading="loading">
            确认修改
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { encrypt } from '@/utils';
import { SystemController } from '@/api';

export default {
  name: 'password',
  data () {
    return {
      loading: false,
      form: {
        loginName: '',
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      }
    };
  },
  methods: {
    onBack () {
      this.$router.go(-1);
    },
    validateNewPassword () {
      return this.form.newPassword !== this.form.oldPassword;
    },
    validateConfirmPassword () {
      return this.form.newPassword === this.form.confirmPassword;
    },
    handleSubmit () {
      this.loading = true;
      const params = {
        loginName: this.form.loginName,
        oldPass: encrypt(this.form.oldPassword),
        newPass: encrypt(this.form.newPassword)
      };

      SystemController.changePasswordWithoutLogin(this, params)
        .then(res => {
          this.$toast.success('密码修改成功');
          setTimeout(() => {
            this.onBack();
          }, 1000);
        })
        .finally(() => {
          this.loading = false;
        });
    }
  }
};
</script>

<style scoped>
.form-password {
  height: 100vh;
  background-color: #f7f8fa;
}

.form-container {
  padding: 16px 0;
}

:deep(.van-cell-group--inset) {
  margin: 0 16px;
}
</style>
